<template>
    <div class="out_box">
        <headers />

        <div class="relative content_box">
            <notice class="notice" :data="noticeData" />
            <div class="info_box">
                <personal-menu />
                <div class="content">
                    <h2 class="title">
                        <i class="iconfont">&#xe6d8;</i>
                        已购算力
                    </h2>
                    <div style='height:400px;overflow: hidden;'>
                        <v-data-table :data='getData' :columns='columns' stripe></v-data-table>
                    </div>
                </div>
            </div>
        </div>
        
        <footers :type="2" />
    </div>
</template>

<script>
    import Headers from '@components/header/header.vue';
    import Footers from '@components/footer/footer.vue';
    import Notice from '@components/notice/notice.vue';
    import PersonalMenu from '@components/personal_menu/personal_menu.vue';

    export default {
        name: "Purchased",
        components: {
            Headers,
            Footers,
            Notice,
            PersonalMenu
        },
        data: function() {
            return {
                noticeData: [
                    { id: 1, text: '猛击者' },
                    { id: 2, text: '付款购买' },
                    { id: 3, text: '付款' },
                    { id: 4, text: '猛击者' }
                ],
                columns:[
                    { title:"歌名", field:'name', width: '10%' },
                    { title:"时长", field:'time', width: '25%' },
                    { title:"歌手", field:'singer', width: '25%' },
                    { title:"专辑", field:'album', width: '20%' },
                ],
                getData: function() {
                    return new Promise(function(resolve) {
                        resolve({
                            "result":[
                                {
                                    "name": "高级动物高级动物高级动物高级动物高级动物高级动物",
                                    "time": "03:37",
                                    "singer": "窦唯",
                                    "album": "摇滚中国乐势力"
                                },{
                                    "name": "谁伴我闯荡 - (电影《Beyond日记》插曲)",
                                    "time": "04:13",
                                    "singer": "Beyond",
                                    "album": "25周年精选"
                                },{
                                    "name": "高级动物",
                                    "time": "03:37",
                                    "singer": "窦唯",
                                    "album": "摇滚中国乐势力"
                                },{
                                    "name": "谁伴我闯荡 - (电影《Beyond日记》插曲)",
                                    "time": "04:13",
                                    "singer": "Beyond",
                                    "album": "25周年精选"
                                }
                            ],
                            "totalCount":11,
                            "pageSize":10,
                            "pageNo":1
                        });
                    });
                }
            }
        },
        computed: {
        },
        methods: {
        },
        mounted: function() {
        }
    };
</script>

<style lang="less" scoped>
    @import '~@css/root.less';
    
    .out_box{
        background-color: #eaeaea;
    }
    .content_box{
        width: 80%;
        min-width: 800px;
        margin: 20px auto;
    }
    .notice{
        margin-bottom: 20px;
    }
    .info_box{
        display: flex;
    }
    .content{
        flex: 4;
        margin-left: 20px;
        background-color: #f2f2f2;
        .title{
            padding: 20px;
            font-size: 20px;
            .iconfont{
                font-size: 26px;
                vertical-align: middle;
                color: @theme_color;
            }
        }
        /deep/ .ant-table-thead>tr>th{
            font-weight: normal;
            color: #999;
            white-space: initial;
        }
        /deep/ .ant-table-thead>tr>th, .ant-table-tbody>tr>td{
            padding-left: 40px;
        }
        /deep/ .ant-table-footer{
            padding: 0 40px;
        }
    }
</style>
